import { MapService } from '../../core';

import { OnDestroy } from '@angular/core';

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

import { ApiService } from "../../core/services/api.service";

@Component({
  selector: 'app-map-layer-list',
  templateUrl: './mapbox-map-layer-list.component.html',
  styleUrls: ['./mapbox-map-layer-list.component.scss']
})
export class MapLayerListComponent implements OnInit, OnDestroy {

  constructor(
    private apiService: ApiService,
    private mapService: MapService
  ) { }

  styles = null;
  data = null;
  @Input() id = null;
  @Output() selectChangeEmitter = new EventEmitter<any>();
  ngOnInit() {
    this.mapService.init().then((glmap: any) => {
      if (glmap.isStyleLoaded()) {
        this.init();
      } else {
        glmap.on('load', () => {
          this.init();
        });
      }
    });
  }
  init() {
    this.apiService
      .get("map", this.id).subscribe(res => {
        this.styles = res.styles;
        this.data = res.treeConfig;
        this.data.forEach(element => {
          element.active = !element.active;
          this.itemClick(element);
        });
      });
  }
  itemClick(e) {
    e.active = !e.active;
    this.removelayerByGroup(e);
    if (e.active) {
      switch (e.type) {
        case 'special-sub-sev':
          this.mapService.addThematicLayerByIds(e.sevs);
          break;
        case 'interface-sev':
          this.addInterfaceSevLayer(e.sevs);
          break;
        default:
          // this.selectChangeEmitter.emit(e);
          break;
      }
    } else {
      switch (e.type) {
        case 'special-sub-sev':
          this.mapService.removeLayerByIds(e.sevs, false);
          break;
        case 'interface-sev':
          this.removeInterfaceSevLayer(e.sevs);
          break;
        default:
          // this.selectChangeEmitter.emit(e);
          break;
      }
    }
    this.selectChangeEmitter.emit(this.getLegs());
  }
  /**
   * 获取图例
   */
  getLegs() {
    let legs = [];
    for (const item of this.data) {
      if (item.active) {
        if (typeof item.legend === 'string') {
          legs.push(item.legend);
        }
        if (item.legend instanceof Array) {
          legs.push(...item.legend);
        }
      }
    }
    return legs;
  }
  mouseenter(item) {
    item.img = item.simg;
  }
  mouseleave(item) {
    item.img = item.dimg;
  }
  /**
   * 接口返回数据源--添加图层
   */
  addInterfaceSevLayer(sevs) {
    for (const item of sevs) {
      this.apiService
        .get("map", item.urlid).toPromise().then(res => {
          // 数据源--geojson格式-返回结构需要统一，res.data,res,Data ?
          let dataSource = { "type": "geojson", "data": res.Data };
          item.styles.forEach(styleItem => {
            const styleLayer: any = this.styles.find(style => {
              return style.id === styleItem.id;
            });
            styleLayer.source = dataSource;
            if (styleLayer.type === 'symbol') {
              if (styleItem.options.duration) {
                this.mapService.addSymbolDiffusionLayer(styleLayer, styleItem.options);
              } else {
                this.mapService.addSymbolLayer(styleLayer, styleItem.options);
              }
            } else {
              this.mapService.addGeoJSONLayer(styleLayer, styleItem.options);
            }
          });
        });
    }
  }
  /**
   * 接口返回数据源--移除图层
   */
  removeInterfaceSevLayer(sevs) {
    for (let item of sevs) {
      for (let jtem of item.styles) {
        this.mapService.removeLayerByIds([jtem.id]);
      }
    }
  }


  ngOnDestroy(): void {
    this.removeAllActiveLayer();
  }

  /**
   * 按组一处
   */
  removelayerByGroup(activeItem) {
    if (this.data) {
      this.data.forEach(item => {
        if (item.active && item.group === activeItem.group && item.title !== activeItem.title) {
          switch (item.type) {
            case 'special-sub-sev':
              item.active = false;
              this.mapService.removeLayerByIds(item.sevs, false);
              break;
            case 'interface-sev':
              item.active = false;
              this.removeInterfaceSevLayer(item.sevs);
              break;
          }
        }
      });
    }
  }
  /**
   * 移除所有激活图层
   */
  removeAllActiveLayer() {
    /// 移除所有选中图层
    if (this.data) {
      this.data.forEach(item => {
        if (item.active) {
          switch (item.type) {
            case 'special-sub-sev':
              this.mapService.removeLayerByIds(item.sevs, false);
              break;
            case 'interface-sev':
              this.removeInterfaceSevLayer(item.sevs);
              break;
          }
        }
      });
    }
  }
}
